<div style="padding-top: 15px; padding-bottom: 15px;">
	<div class="container">
		<a routerLink="/learn" class="btn btn-outline-dark" style="margin-top: 5px;">Back</a>
		<h2>Gyroscope</h2>
		<h3>Gyroscope</h3>
		<p>The gyroscope can be useful booth to control objects in the scene as a controller or as a viewport controller for cameras. Gyroscopes are present in pretty much every recent mobile device out there. In this tutorial we will explore how to use it inside nunuStudio and explore some of its use cases.</p>
		<p>The device gyroscope provides information about rotation of the device represented as an euler rotation.</p>

		<img class="img-normal" src="assets/learn/basics/gyroscope/gyro.png"/>

		<p>The code bellow demonstrates how to create a Gyroscope input object, the gyroscope object its not a normal a nunuSutio object is exists only as a programming API, and has the following attributes, each representing a rotation axis relative to the device:</p>
		<ul>
			<li><p>Alpha - Rotation on the Z axis</p></li>
			<li><p>Beta - Rotation on the X axis</p></li>
			<li><p>Gamma - Rotation on the Y axis</p></li>
			<li><p>Orientation - Indicates the orientation of the device</p></li>
		</ul>
		<pre><code class="hljs javascript">var camera, gyro;

function initialize()
{{'{'}}
	camera = scene.getObjectByName("camera");
	gyro = new Gyroscope();
{{'}'}}

function update()
{{'{'}}
	gyro.setObjectQuaternion(camera);
{{'}'}}

function dispose()
{{'{'}}
	gyro.dispose();
{{'}'}}</code></pre>

		<p>If everything works as expected you should see something similar to the example running bellow.</p>

		<app-viewer fname="assets/learn/basics/gyroscope/gyro.nsp"></app-viewer>

		<h3>Panorama</h3>
		<p>The gyroscope can be used to easily create interactive panoramic visualizations for mobile devices, we can do this very simply using a cubemap.</p>
		<p>A cube map is a representation of a 360 scene using 6 images each one representing the face of a cube. For this example we will use the following images.</p>
		<p>The picture used in this example was taken by Emil Persson and its available for download <a href="http://www.humus.name">here</a> (licensed under a Creative Commons Attribution 3.0).</p>

		<img class="img-normal" src="assets/learn/basics/gyroscope/preview.jpg"/>

		<p>To create a new cube map select Import, Texture, CubeMap in Asset Explorer a new asset will be created, double click the new asset and a cube map editor tab will open, now simply drag the sides of your cube map to the correct position in the editor.</p>

		<img class="img-normal" src="assets/learn/basics/gyroscope/editor.jpg"/>

		<p>To set this cube map as the scene background, select the scene object in the object explorer and drag the cubemap asset to the background texture box.</p>

		<app-viewer fname="assets/learn/basics/gyroscope/pano.nsp"></app-viewer>
	</div>
</div>
